<template>
	<div class="p-grid">
		<div class="p-col-12 flexbox-demo">
			<h4>FlexBox</h4>
			<p>
				使用响应式FlexBox实用程序轻松管理组件的布局。如果您需要实用程序来管理应用程序的布局，请参考<router-link to="/grid">网格系统</router-link>  。
			</p>

			<h5>Flex 容器</h5>
			<p>可以使用<i>p-d-flex</i> 或者 <i>p-d-inline-flex</i>类将元素配置为flexbox容器。</p>

<CodeHighlight>
&lt;div class="p-d-flex"&gt;Flex 容器&lt;/div&gt;
&lt;div class="p-d-inline-flex"&gt;Inline Flex 容器&lt;/div&gt;
</CodeHighlight>

			<div class="box p-d-flex p-mb-3">Flex 容器</div>
			<div class="box p-d-inline-flex">Inline Flex 容器</div>

			<h5>方向</h5>
			<p>使用<i>p-flex-{direction}</i> 类应用默认值，其中direction可以是以下任意一种。</p>
			<ul>
				<li>row (default)</li>
				<li>row-reverse</li>
				<li>column</li>
				<li>column-reverse</li>
			</ul>

			<h6>Row</h6>
<CodeHighlight>
&lt;div class="p-d-flex"&gt;
&lt;div class="p-mr-2"&gt;项目 1&lt;/div&gt;
&lt;div class="p-mr-2"&gt;项目 2&lt;/div&gt;
&lt;div&gt;项目 3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex">
				<div class="p-mr-2">项目 1</div>
				<div class="p-mr-2">项目 2</div>
				<div>项目 3</div>
			</div>

			<h6>列</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-flex-column"&gt;
&lt;div class="p-mb-2"&gt;项目 1&lt;/div&gt;
&lt;div class="p-mb-2"&gt;项目 2&lt;/div&gt;
&lt;div&gt;项目 3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-flex-column">
				<div class="p-mb-2">项目 1</div>
				<div class="p-mb-2">项目 2</div>
				<div>项目 3</div>
			</div>

			<h6>响应式</h6>
			<p>R大屏幕的行方向，小屏幕的列。</p>

<CodeHighlight>
&lt;div class="p-d-flex p-flex-column p-flex-md-row"&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;项目 1&lt;/div&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;项目 2&lt;/div&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;项目 3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>

			<div class="p-d-flex p-flex-column p-flex-md-row">
				<div class="p-mb-2 p-mr-2">项目 1</div>
				<div class="p-mb-2 p-mr-2">项目 2</div>
				<div class="p-mb-2 p-mr-2">项目 3</div>
			</div>

			<h6>Direction 类</h6>
			<ul>
				<li>p-flex-row</li>
				<li>p-flex-row-reverse</li>
				<li>p-flex-column</li>
				<li>p-flex-column-reverse</li>
				<li>p-flex-sm-row</li>
				<li>p-flex-sm-row-reverse</li>
				<li>p-flex-sm-column</li>
				<li>p-flex-sm-column-reverse</li>
				<li>p-flex-md-row</li>
				<li>p-flex-md-row-reverse</li>
				<li>p-flex-md-column</li>
				<li>p-flex-md-column-reverse</li>
				<li>p-flex-lg-row</li>
				<li>p-flex-lg-row-reverse</li>
				<li>p-flex-lg-column</li>
				<li>p-flex-lg-column-reverse</li>
				<li>p-flex-xl-row</li>
				<li>p-flex-xl-row-reverse</li>
				<li>p-flex-xl-column</li>
				<li>p-flex-xl-column-reverse</li>
			</ul>

			<h5>排序</h5>
			<p>使用<i>p-order-{value}</i>指定组件在容器中的排序。它的值可以是 0 到 6.</p>
<CodeHighlight>
&lt;div class="p-d-flex"&gt;
	&lt;div class="p-mr-2 p-order-3"&gt;项目 1&lt;/div&gt;
	&lt;div class="p-mr-2 p-order-1"&gt;项目 2&lt;/div&gt;
	&lt;div class="p-mr-2 p-order-2"&gt;项目 3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex">
				<div class="p-mr-2 p-order-3">项目 1</div>
				<div class="p-mr-2 p-order-1">项目 2</div>
				<div class="p-mr-2 p-order-2">项目 3</div>
			</div>

			<h6>响应式</h6>
			<p>排序根据屏幕尺寸而变化。</p>
<CodeHighlight>
&lt;div class="p-d-flex"&gt;
	&lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;项目 1&lt;/div&gt;
	&lt;div class="p-mr-2 p-order-1 p-order-md-3"&gt;项目 2&lt;/div&gt;
	&lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;项目 3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>

			<div class="p-d-flex">
				<div class="p-mr-2 p-order-3 p-order-md-2">项目 1</div>
				<div class="p-mr-2 p-order-1 p-order-md-3">项目 2</div>
				<div class="p-mr-2 p-order-2 p-order-md-1">项目 3</div>
			</div>

			<h6>Order 类</h6>
			<ul>
				<li>p-order-0</li>
				<li>p-order-1</li>
				<li>p-order-2</li>
				<li>p-order-3</li>
				<li>p-order-4</li>
				<li>p-order-5</li>
				<li>p-order-6</li>
				<li>p-order-sm-0</li>
				<li>p-order-sm-1</li>
				<li>p-order-sm-2</li>
				<li>p-order-sm-3</li>
				<li>p-order-sm-4</li>
				<li>p-order-sm-5</li>
				<li>p-order-sm-6</li>
				<li>p-order-md-0</li>
				<li>p-order-md-1</li>
				<li>p-order-md-2</li>
				<li>p-order-md-3</li>
				<li>p-order-md-4</li>
				<li>p-order-md-5</li>
				<li>p-order-md-6</li>
				<li>p-order-lg-0</li>
				<li>p-order-lg-1</li>
				<li>p-order-lg-2</li>
				<li>p-order-lg-3</li>
				<li>p-order-lg-4</li>
				<li>p-order-lg-5</li>
				<li>p-order-lg-6</li>
				<li>p-order-xl-0</li>
				<li>p-order-xl-1</li>
				<li>p-order-xl-2</li>
				<li>p-order-xl-3</li>
				<li>p-order-xl-4</li>
				<li>p-order-xl-5</li>
				<li>p-order-xl-6</li>
			</ul>

			<h5>包装 wrap</h5>
			<p>当容器中没有足够的空间时，Flex wrap定义包装行为（避免组件变形）。该类的格式为<i>p-flex-{value}</i>，value是下面可选值。</p>

			<ul>
				<li>nowrap (默认)</li>
				<li>wrap</li>
				<li>wrap-reverse</li>
			</ul>

			<h6>不使用 Wrap 包装</h6>
<CodeHighlight>
&lt;div class="p-d-flex"&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 1&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 2&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 3&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 4&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 5&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 6&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex">
				<div class="p-mr-2 p-mb-2">项目 1</div>
				<div class="p-mr-2 p-mb-2">项目 2</div>
				<div class="p-mr-2 p-mb-2">项目 3</div>
				<div class="p-mr-2 p-mb-2">项目 4</div>
				<div class="p-mr-2 p-mb-2">项目 5</div>
				<div class="p-mr-2 p-mb-2">项目 6</div>
			</div>

			<h6>使用 Wrap 包装</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-flex-wrap"&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 1&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 2&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 3&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 4&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 5&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 6&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-flex-wrap">
				<div class="p-mr-2 p-mb-2">项目 1</div>
				<div class="p-mr-2 p-mb-2">项目 2</div>
				<div class="p-mr-2 p-mb-2">项目 3</div>
				<div class="p-mr-2 p-mb-2">项目 4</div>
				<div class="p-mr-2 p-mb-2">项目 5</div>
				<div class="p-mr-2 p-mb-2">项目 6</div>
			</div>

			<h6>Wrap Reverse</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-flex-wrap-reverse"&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 1&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 2&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 3&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 4&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 5&lt;/div&gt;
	&lt;div class="p-mr-2 p-mb-2"&gt;项目 6&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-flex-wrap-reverse">
				<div class="p-mr-2 p-mb-2">项目 1</div>
				<div class="p-mr-2 p-mb-2">项目 2</div>
				<div class="p-mr-2 p-mb-2">项目 3</div>
				<div class="p-mr-2 p-mb-2">项目 4</div>
				<div class="p-mr-2 p-mb-2">项目 5</div>
				<div class="p-mr-2 p-mb-2">项目 6</div>
			</div>

			<h6>Wrap 类</h6>
			<ul>
				<li>p-flex-nowrap</li>
				<li>p-flex-wrap</li>
				<li>p-flex-wrap-reverse</li>
				<li>p-flex-sm-nowrap</li>
				<li>p-flex-sm-wrap</li>
				<li>p-flex-sm-wrap-reverse</li>
				<li>p-flex-md-nowrap</li>
				<li>p-flex-md-wrap</li>
				<li>p-flex-md-wrap-reverse</li>
				<li>p-flex-lg-nowrap</li>
				<li>p-flex-lg-wrap</li>
				<li>p-flex-lg-wrap-reverse</li>
				<li>p-flex-xl-nowrap</li>
				<li>p-flex-xl-wrap</li>
				<li>p-flex-xl-wrap-reverse</li>
			</ul>

			<h5>内容对齐 Justify Content</h5>
			<p>内容对齐是沿主轴的对齐方式，并使用 <i>p-jc-{value}</i>格式和响应方式进行定义。值字段可以是以下类型。</p>
			<ul>
				<li>start</li>
				<li>end</li>
				<li>center</li>
				<li>between</li>
				<li>around</li>
				<li>evenly</li>
			</ul>

			<h6>两端对齐 Between</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-jc-between"&gt;
	&lt;div&gt;项目 1&lt;/div&gt;
	&lt;div&gt;项目 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-jc-between">
				<div>项目 1</div>
				<div>项目 2</div>
			</div>

			<h6>居中 Center</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-jc-center"&gt;
	&lt;div class="p-mr-2"&gt;项目 1&lt;/div&gt;
	&lt;div&gt;项目 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-jc-center">
				<div class="p-mr-2">项目 1</div>
				<div>项目 2</div>
			</div>

			<h6>Justify Content 类</h6>
			<ul>
				<li>p-jc-start</li>
				<li>p-jc-end</li>
				<li>p-jc-center</li>
				<li>p-jc-between</li>
				<li>p-jc-around</li>
				<li>p-jc-evenly</li>
				<li>p-jc-sm-start</li>
				<li>p-jc-sm-end</li>
				<li>p-jc-sm-center</li>
				<li>p-jc-sm-between</li>
				<li>p-jc-sm-around</li>
				<li>p-jc-sm-evenly</li>
				<li>p-jc-md-start</li>
				<li>p-jc-md-end</li>
				<li>p-jc-md-center</li>
				<li>p-jc-md-between</li>
				<li>p-jc-md-around</li>
				<li>p-jc-md-evenly</li>
				<li>p-jc-lg-start</li>
				<li>p-jc-lg-end</li>
				<li>p-jc-lg-center</li>
				<li>p-jc-lg-between</li>
				<li>p-jc-lg-around</li>
				<li>p-jc-lg-evenly</li>
				<li>p-jc-xl-start</li>
				<li>p-jc-xl-end</li>
				<li>p-jc-xl-center</li>
				<li>p-jc-xl-between</li>
				<li>p-jc-xl-around</li>
				<li>p-jc-xl-evenly</li>
			</ul>

			<h5>对齐项目 Align Items</h5>
			<p>“对齐项目”配置是沿横轴的对齐方式，并使用<i>p-ai-{value}</i>格式和响应选项进行定义。值字段接受以下选项。</p>
			<ul>
				<li>start</li>
				<li>end</li>
				<li>center</li>
				<li>baseline</li>
				<li>stretch (default)</li>
			</ul>

			<h6>Start</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-ai-start"&gt;
	&lt;div class="p-mr-2" style="height:100px"&gt;项目 1&lt;/div&gt;
	&lt;div style="height:50px"&gt;项目 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-ai-start">
				<div class="p-mr-2" style="height:100px">项目 1</div>
				<div style="height:50px">项目 2</div>
			</div>

			<h6>Center</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-ai-center"&gt;
	&lt;div class="p-mr-2" style="height:100px"&gt;项目 1&lt;/div&gt;
	&lt;div style="height:50px"&gt;项目 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-ai-center">
				<div class="p-mr-2" style="height:100px">项目 1</div>
				<div style="height:50px">项目 2</div>
			</div>

			<h6>Align Items 类</h6>
			<ul>
				<li>p-ai-start</li>
				<li>p-ai-end</li>
				<li>p-ai-center</li>
				<li>p-ai-baseline</li>
				<li>p-ai-strech</li>
				<li>p-ai-sm-start</li>
				<li>p-ai-sm-end</li>
				<li>p-ai-sm-center</li>
				<li>p-ai-sm-baseline</li>
				<li>p-ai-sm-strech</li>
				<li>p-ai-md-start</li>
				<li>p-ai-md-end</li>
				<li>p-ai-md-center</li>
				<li>p-ai-md-baseline</li>
				<li>p-ai-md-strech</li>
				<li>p-ai-lg-start</li>
				<li>p-ai-lg-end</li>
				<li>p-ai-lg-center</li>
				<li>p-ai-lg-baseline</li>
				<li>p-ai-lg-strech</li>
				<li>p-ai-xl-start</li>
				<li>p-ai-xl-end</li>
				<li>p-ai-xl-center</li>
				<li>p-ai-xl-baseline</li>
				<li>p-ai-xl-strech</li>
			</ul>

			<h5>自我对齐 Align Self</h5>
			<p>
				Align Self配置是特定元素沿横轴的对齐方式，并使用<i>p-as-{value}</i>  格式和响应选项进行定义。值字段接受以下选项。</p>
			<ul>
				<li>start</li>
				<li>end</li>
				<li>center</li>
				<li>baseline</li>
				<li>stretch (default)</li>
			</ul>

<CodeHighlight>
&lt;div class="p-d-flex" style="height: 150px;"&gt;
	&lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt;
	&lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt;
	&lt;div class="p-mr-2 p-as-end"&gt;End&lt;/div&gt;
	&lt;div class="p-mr-2 p-as-stretch"&gt;Stretch&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex" style="height: 150px;">
				<div class="p-mr-2 p-as-start">Start</div>
				<div class="p-mr-2 p-as-center">Center</div>
				<div class="p-mr-2 p-as-end">End</div>
				<div class="p-mr-2 p-as-stretch">Stretch</div>
			</div>

			<h6>Align Items 类</h6>
			<ul>
				<li>p-as-start</li>
				<li>p-as-end</li>
				<li>p-as-center</li>
				<li>p-as-baseline</li>
				<li>p-as-strech</li>
				<li>p-as-sm-start</li>
				<li>p-as-sm-end</li>
				<li>p-as-sm-center</li>
				<li>p-as-sm-baseline</li>
				<li>p-as-sm-strech</li>
				<li>p-as-md-start</li>
				<li>p-as-md-end</li>
				<li>p-as-md-center</li>
				<li>p-as-md-baseline</li>
				<li>p-as-md-strech</li>
				<li>p-as-lg-start</li>
				<li>p-as-lg-end</li>
				<li>p-as-lg-center</li>
				<li>p-as-lg-baseline</li>
				<li>p-as-lg-strech</li>
				<li>p-as-xl-start</li>
				<li>p-as-xl-end</li>
				<li>p-as-xl-center</li>
				<li>p-as-xl-baseline</li>
				<li>p-as-xl-strech</li>
			</ul>

			<h5>内容对齐 Align Content</h5>
			<p>内容对齐是沿横轴的对齐方式，并使用<i>p-ac-{value}</i> 格式和响应选项进行定义。值字段是以下可选值。</p>
			<ul>
				<li>start</li>
				<li>end</li>
				<li>center</li>
				<li>around</li>
				<li>stretch</li>
				<li>between</li>
			</ul>

			<h6>Align Content 类</h6>
			<ul>
				<li>p-ac-start</li>
				<li>p-ac-end</li>
				<li>p-ac-center</li>
				<li>p-ac-around</li>
				<li>p-ac-stretch</li>
				<li>p-ac-between</li>
				<li>p-ac-sm-start</li>
				<li>p-ac-sm-end</li>
				<li>p-ac-sm-center</li>
				<li>p-ac-sm-around</li>
				<li>p-ac-sm-stretch</li>
				<li>p-ac-sm-between</li>
				<li>p-ac-md-start</li>
				<li>p-ac-md-end</li>
				<li>p-ac-md-center</li>
				<li>p-ac-md-around</li>
				<li>p-ac-md-stretch</li>
				<li>p-ac-md-between</li>
				<li>p-ac-lg-start</li>
				<li>p-ac-lg-end</li>
				<li>p-ac-lg-center</li>
				<li>p-ac-lg-around</li>
				<li>p-ac-lg-stretch</li>
				<li>p-ac-lg-between</li>
				<li>p-ac-xl-start</li>
				<li>p-ac-xl-end</li>
				<li>p-ac-xl-center</li>
				<li>p-ac-xl-around</li>
				<li>p-ac-xl-stretch</li>
				<li>p-ac-xl-between</li>
			</ul>

			<h5>Margin with FlexBox</h5>
			<p>与<router-link to="/setup">spacing utilities</router-link>结合使用时，flexbox提供了无限的可能性。
			</p>
			<h6>水平间距</h6>

<CodeHighlight>
&lt;div class="p-d-flex p-p-3 card"&gt;
	&lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt;
	&lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
	&lt;Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-p-3 card">
				<Button type="Button" icon="pi pi-check" class="p-mr-2"/>
				<Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
				<Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/>
			</div>

			<h6>垂直间距</h6>
<CodeHighlight>
&lt;div class="p-d-flex p-flex-column" style="height:150px"&gt;
	&lt;div&gt;项目 1&lt;/div&gt;
	&lt;div class="p-mt-auto"&gt;项目 2&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
			<div class="p-d-flex p-flex-column" style="height:150px">
				<div>项目 1</div>
				<div class="p-mt-auto">项目 2</div>
			</div>
		</div>
	</div>
</template>

<script>
import CodeHighlight from '@/components/CodeHighlight';

export default {
	components: {
		'CodeHighlight': CodeHighlight
	}
}
</script>


<style lang="scss" scoped>
	.p-d-flex > div,
	.box {
		background-color: var(--surface-e);
		text-align: center;
		padding: 1rem;
		border-radius: 4px;
		box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
	}

	.p-d-flex > div {
		width: 8rem;
	}

	i:not([class~="pi"]) {
		background-color: #ffffff;
		color: #2196f3;
		font-family: Monaco, courier, monospace;
		font-style: normal;
		font-size: 12px;
		padding: 2px 4px;
		letter-spacing: .5px;
		border-radius: 3px;
		font-weight: 600;
		margin: 0 2px;
	}

	/deep/ pre[class*="language-"] {
		&:before, &:after {
			display: none !important;
		}

		code {
			border-left: 10px solid var(--surface-d) !important;
			box-shadow: none !important;
			background: var(--surface-e) !important;
			margin: 1em 0;
			color: var(--text-color);
			font-size: 14px;

			.token {
				&.tag,
				&.keyword {
					color: #2196F3 !important;
				}

				&.attr-name,
				&.attr-string {
					color: #2196F3 !important;
				}

				&.attr-value {
					color: #4CAF50 !important;
				}

				&.punctuation {
					color: var(--text-color);
				}

				&.operator,
				&.string {
					background: transparent;
				}
			}
		}
	}
</style>
